{% extends 'base.html' %}


{% block title %}
    首页
{% endblock %}

{% block head %}
    <style>
        .text-container {
            width: 150px; /* 设置容器宽度 */
            height: 40px; /* 设置容器高度 */
            overflow: hidden; /* 隐藏超出容器范围的内容 */
        }

        .text {
            display: -webkit-box; /* 将文本内容以块级元素的方式显示 */
            -webkit-line-clamp: 2; /* 设置显示的行数为两行 */
            -webkit-box-orient: vertical; /* 设置文本垂直方向排列 */
            overflow: hidden; /* 隐藏超出指定行数的文本内容 */
            text-overflow: ellipsis; /* 添加省略号 */
        }
    </style>
{% endblock %}

{% block body %}
    {#轮播图#}
    <section>
        <div id="myCarousel" class="carousel slide" style="height: 350px">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img style="width: 100%;height: 350px"
                         src="{{ url_for('static',filename='img/carousel/Carousel1.jpg') }}" alt="First slide">
                </div>
                <div class="item">
                    <img style="width: 100%;height: 350px"
                         src="{{ url_for('static',filename='img/carousel/Carousel2.jpg') }}" alt="Second slide">
                </div>
                <div class="item">
                    <img style="width: 100%;height: 350px"
                         src="{{ url_for('static',filename='img/carousel/Carousel3.jpg') }}" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>
    {# 离线统计推荐 #}
    <section style="margin-top: 15px;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <p class="panel-title" style="font-weight: bold;font-size: large;">实时推荐</p>
            </div>

            <div class="panel-body">
                <section style="margin-top: 15px;">
                    <div id="onlineRecs"></div>
                </section>
            </div>


            <div class="panel-heading">
                <p class="panel-title" style="font-weight: bold;font-size: large;">离线统计</p>
            </div>
            <div class="panel-body">
                <div style="border-bottom: 1px solid #dddddd;">
                    <ul id="his_rec_avg_ul" class="nav nav-tabs">
                        <li role="presentation" class="active"><a style="font-size: medium;" href="#">历史热门</a></li>
                        <li role="presentation"><a style="font-size: medium" href="#">近期热门</a></li>
                        <li role="presentation"><a style="font-size: medium" href="#">好评榜</a></li>
                    </ul>
                    <div class="tab-content"
                         style="padding-left: 15px; padding-right: 15px;border-left: 1px solid #dddddd; border-right: 1px solid #dddddd;">
                        <div class="tab-pane active" style="padding-top: 15px">
                            <div id="hot">

                            </div>
                            {#分页#}
                            <div style="text-align: right">
                                <ul id="product_pagination" class="pagination">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



{% endblock %}


{% block js %}

    <script src="{{ url_for('static', filename="js/jquery-3.6.0.min.js") }}"></script>
    <script src="{{ url_for('static', filename="js/pagination.js") }}"></script>
    <script>
        $(document).ready(function () {
            // 页面加载完成时发送 AJAX 请求
            getPageInfo();
            // 对his_rec_avg_ul 下的a标签进行监听
            listeningRecommendedType();
            getOnlineResc();
        });

        function getPageInfo(page = 1) {
            var type_url;
            switch ($(this).text()) {
                case "历史热门":
                    type_url = '{{ url_for("offline.getHistoricalTop") }}';
                    break;
                case "近期热门":
                    type_url = '{{ url_for("offline.getRecentTop") }}';
                    break;
                case "好评榜":
                    type_url = '{{ url_for("offline.topRating") }}';
            }
            getRecommendedGoods(type_url, page)
        }

        function listeningRecommendedType() {
            $("#his_rec_avg_ul a").on("click", function (e) {
                // 阻止默认链接点击行为
                e.preventDefault();
                // 移除之前的 active 类
                $("#his_rec_avg_ul li.active").removeClass("active");
                // 添加 active 类到当前点击的父级 li 元素
                $(this).parent().addClass("active");
                // 传入选中的值
                var type_url;
                switch ($(this).text()) {
                    case "历史热门":
                        type_url = '{{ url_for("offline.getHistoricalTop") }}';
                        break;
                    case "近期热门":
                        type_url = '{{ url_for("offline.getRecentTop") }}';
                        break;
                    case "好评榜":
                        type_url = '{{ url_for("offline.topRating") }}';
                }
                getRecommendedGoods(type_url)
            })
        }

        function getRecommendedGoods(type_url = '{{ url_for("offline.getHistoricalTop") }}', page = 1) {
            // 发送 AJAX 请求
            $.ajax({
                url: type_url,
                method: "post",
                contentType: 'application/json',
                data: JSON.stringify({'page': page}),
                {#headers: {#}
                {#    'X-CSRFToken': $('meta[name=csrf_token]').attr('content')#}
                {#/},#}
                success: function (response) {
                    // 在控制台打印响应结果
                    //console.log(response);
                    // 填充之前清空
                    $("#hot").empty();
                    var s_res = ""
                    $.each(response.productsList, function (index, obj) {
                        var s_row_start = "<div class='row'>"
                        var s_row_end = "</div>"
                        var detailPageLink = '/detail/' + obj.product_id;  // 替换为实际的详情页路径
                        var s_col =
                            '<div class="col-md-2">' +
                            '<a href="' + detailPageLink + '">' +
                            '<img style="width: 100%;height: 180px" src="' + obj.product_image + '">' +
                            '<div class="text-container"><p class="text">' + obj.product_name + '</div></p>' +
                            '</a></div>';
                        if (index % 6 === 0) {
                            s_res += (s_row_start + s_col);
                        } else if ((index + 1) % 6 === 0) {
                            s_res += (s_col + s_row_end);
                            $("#hot").append(s_res);
                            s_res = "";
                        } else {
                            s_res += s_col;
                        }
                    })
                    product_pagination(response.current_page, response.total_pages)
                }
            });
        }

        function getOnlineResc() {
            // 发送 AJAX 请求
            $.ajax({
                url: '{{ url_for("online.onlineRecs") }}',
                method: "GET",
                contentType: 'application/json',
                success: function (response) {
                    // 在控制台打印响应结果
                    // console.log(response);
                    // 填充之前清空
                    $("#onlineRecs").empty();
                    $.each(response.productsList, function (index, obj) {
                        var detailPageLink = '/detail/' + obj.product_id;  // 替换为实际的详情页路径
                        var s_col =
                            '<div class="col-md-2">' +
                            '<a href="' + detailPageLink + '">' +
                            '<img style="width: 120px;height: 120px" src="' + obj.product_image + '"></a>' +
                            '<div class="text-container"><p class="text">' + obj.product_name + '</div></p>' +
                            '</div>';
                        if (index < 6) {
                            $("#onlineRecs").append(s_col);
                        }
                    })
                }
            });
        }
    </script>

{% endblock %}

